<template>
    <base-breadcrumb>
        <searchData :search-data="searchArr" @search="search"/>

        <a-card>
          <list-table
            ref="table"
            class="export-table"
            :columns="columns"
            :request="loadData"
            :statisticsConfig="{use: true, temp: statisticsTemp}"
            :export-config="{ use: true, select: '施组方案审批计划', all: '施组方案审批计划' }"
            :export-permission="{select: 'tm_006_exp_05',all: 'tm_006_exp_05'}"
          >
            <!-- @select-click="handleChange" -->

           <!-- <template slot="prefix">
             <a-button @click="add1" type="primary" v-btnPermission="'tm_006_add_01'">新增计划</a-button>
           </template> -->
<!--            <template slot="suffix">-->
<!--              <a @click="visible.changeCycle = true" v-btnPermission="'tm_006_bzq_06'" style="float: right;">变更周期配置</a>-->
<!--            </template>-->

            <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>

            <span slot="description" slot-scope="text">
                <ellipsis :length="8" tooltip>{{ text }}</ellipsis>
            </span>

            <template slot="status" slot-scope="text, record">
                <list-status :color="listStatusMap[record.status]" :isApproval="true" conversion="en" :text="text"></list-status>
            </template>

            <!-- 操作 -->
            <template slot="operation" slot-scope="text, record">
                <MoreButton>
                <a @click="detailed(record, 'view')" v-btnPermission="'tm_006_loo_04'">查看</a>
                <a v-if="record.change || record.status == 'DRAFT_CHANGE'" @click="detailed(record, 'change')" style="color: #f5222d;" v-btnPermission="'tm_006_edi_05'">变更</a>
                <a
                    v-if="(record.status == 'DRAFT' || record.status == 'REJECTED' || record.status == 'REJECTED_CHANGE')&&selfBtnShow(record.creatorId)"
                    @click="addEdit(record)"
                    v-btnPermission="'tm_006_edi_02'"
                    >编辑</a
                >
<!--                <a-->
<!--                    v-if="(record.status == 'DRAFT' || record.status == 'DRAFT_CHANGE')&&selfBtnShow(record.creatorId)"-->
<!--                    @click="discard(record)"-->
<!--                    v-btnPermission="'tm_006_del_03'"-->
<!--                    >删除</a-->
<!--                >-->
                <approval-button
                  v-if="record.status && record.status !== 'DRAFT' "
                  v-btnPermission="'tm_006_moi_05'"
                  :id="record.id" text="审批信息"
                />
                </MoreButton>
            </template>
          </list-table>
        </a-card>
        <DialogForm
          ref="dialogForm"
          edit-model="E"
          :custom-footer="true"
          :visible.sync="visible.changeCycle"
          :header-title="'变更周期'"
          :width="500"
          :form="cycleForm"
          :form-list="formList"
          :rules="rules"
          @confirm="changeCycle">

          <template slot="footer">
            <a-button class="mr10p" :disabled="loading.subChangeCycle" @click="visible.changeCycle=false"> 取消 </a-button>
            <a-button type="primary" :loading="loading.subChangeCycle" @click="handleOk"> 提交 </a-button>
          </template>
        </DialogForm>
    </base-breadcrumb>
</template>

<script>
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import DialogForm from '@/components/DialogForm' // 弹窗
import TitleName from '@/components/TitleName/index.vue'
import { getList, deleteList, getStatistical, getTypesLabel, changeStatus } from '@/api/technical/approvalPlan'
import OrgTreeSelect from '@/components/OrgTreeSelect'
// import { deleteList } from '@/api/technical/approval';
const statusList = [
  { label: '待提交审批', value: '0' },
  { label: '审批中', value: '1' },
  { label: '审批通过', value: '2' },
  { label: '审批不通过', value: '3' },
  { label: '待提交审批(变更中)', value: '4' },
  { label: '审批中(变更中)', value: '5' },
  { label: '审批通过(变更中)', value: '6' },
  { label: '审批不通过(变更中)', value: '7' }
]
const searchArr = [
  // 搜索框
    {
      name: '所属单位',
      valueKey: 'searchQuery',
      type: OrgTreeSelect,
    },
  // {
  //   name: '所属分公司',
  //   valueKey: 'branchCompany',
  //   placeholder: '请选择',
  //   type: SelectSubCompany,
  // },
  // {
  //   name: '所属项目',
  //   placeholder: '请选择',
  //   valueKey: 'projectName',
  //   keyValue: 'branchCompany',
  //   type: SelectProject,
  // },
  {
    name: '名称',
    value: 'constructionName',
    placeholder: '关键字',
    type: 'input',
  },
  {
    name: '填报时间',
    value: 'reportingTime',
    type: 'dateRange',
    attr: {
      rangeFormat: ['reportingTimeStart', 'reportingTimeEnd'],
    }
  },
  {
    name: '填报人',
    value: 'reportingPeople',
    placeholder: '关键字',
    type: 'input',
  },
  {
    name: '审批状态',
    value: 'status',
    placeholder: '请选择',
    type: 'select',
    data: statusList
  },
]
const columns = [
    {
        title: '序号',
        width: '65px',
        scopedSlots: { customRender: 'serial' },
    },
    {
        title: '所属分公司',
        dataIndex: 'branchCompany',
    },
    {
        title: '所属项目',
        dataIndex: 'projectName',
    },
    {
        title: '名称',
        dataIndex: 'constructionName',
    },
    {
        title: '填报人',
        // width: '120px',
        dataIndex: 'reportingPeople',
    },
    {
        title: '状态',
        // width: '120px',
        dataIndex: 'statusSer',
        scopedSlots: { customRender: 'status' },
    },
    {
        title: '填报时间',
        // width: '120px',
        dataIndex: 'reportingTime',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        fixed: 'right',
        width: '230px',
        scopedSlots: { customRender: 'operation' },
    },
]
export default {
    name:'a'+Date.now(),
    components: {
        TitleName,
        SelectSubCompany,
        SelectProject,
        DialogForm,
    },
    data() {
        this.columns = columns
        return {
            searchArr,
            loadData: (parameter) => {
              let that = this
              const requestParameters = Object.assign({}, parameter, that.queryParam)
              getStatistical(requestParameters)
              .then((res) => {
                  this.loading.isTable = false
                  this.from = res.data
              })
              .catch(() => {
                  this.loading.isTable = false
              })
              return getList(requestParameters).then((res) => {
                return res
              })
            },
            childInitData: {},
            visible: {
                approvalDetails: false,
                changeCycle: false
            },
            loading: {
                isTable: false,
                subChangeCycle: false
            },
            advanced: false,
            queryParam: {},
            dataSource: [],
            totalSize: 0,
            objFrom: {
                pageNo: 1,
                pageSize: 10,
            },
            from: {},
            cycleForm: {
              cycle: ''
            },
            cycleData: [],
            //   {label: '半年', value: 'bannian'},
            //   {label: '季度', value: 'jidu'},
            //   {label: '月', value: 'yue'},
            // ],
            rules: {
              cycle: [{ required: true, message: '请选择', trigger: 'change' }],
            },
            listStatusMap: {
              DRAFT: 'yellow',
              SUBMITTED: 'blue',
              PAST: 'green',
              REJECTED: 'red',
              DRAFT_CHANGE: 'yellow',
              SUBMITTED_CHANGE: 'blue',
              PAST_CHANGE: 'green',
              REJECTED_CHANGE: 'red'
            }
        }
    },
    computed: {
      formList() {
        return [{
          type: 'a-select',
          keyName: 'cycle',
          label: '变更周期',
          span: 22,
          data: this.cycleData
        }]
      }
    },
    created() {
        // this.getList()
        getTypesLabel({type: 7}).then((res) => {
          if (res.code == 200) {
            this.cycleData = res.data.map((e) => {
              e.value = e.id
              e.label = e.name
              return e
            })
            this.cycleForm.cycle = res.data.find(e => e.enabled)?.id
          }
        })
    },
    methods: {
        search(values) {
          this.queryParam = { ...values }
          this.$refs.table.refresh()
        },
        // 表格选项改变
        handleChange(selectedRowKeys) {
          const { keys, rows } = selectedRowKeys
          console.log(keys, rows)
          // this.selectedRowKeys = keys
        },
        handleOk() {
          this.$refs.dialogForm.handleOk()
        },
        changeCycle(data) {
          // this.$refs.dialogForm.handleOk()
          console.log(data)
          this.loading.subChangeCycle = true
          const id = data.cycle
          changeStatus(id).then((res) => {
            this.loading.subChangeCycle = false
            this.visible.changeCycle = false
            if (res.code == 200 || res.data.code == 200) {
              this.$message.success('变更成功')
              this.$refs.table.refresh()
            }
          }).catch(() => {
              this.loading.subChangeCycle = false
          })
        },
        toggleApprovalDetails(data) {
            this.childInitData = { ...data }
            this.visible.approvalDetails = true
        },
        // 展开收起状态
        toggleAdvanced() {
            this.advanced = !this.advanced
        },
        getList() {
            if (this.loading.isTable) return
            this.loading.isTable = true
            getList(this.objFrom)
                .then((res) => {
                    this.loading.isTable = false
                    this.dataSource = res.data || []
                    this.totalSize = res.totalSize
                })
                .catch(() => {
                    this.loading.isTable = false
                })
            getStatistical(this.objFrom)
                .then((res) => {
                    this.loading.isTable = false
                    this.from = res.data
                })
                .catch(() => {
                    this.loading.isTable = false
                })
        },
        writeTime(value, dateString) {
            this.objFrom.reportingTimeStart = dateString[0]
            this.objFrom.reportingTimeEnd = dateString[1]
        },
        handleChange1() {},
        handleChange() {},
        addEmpty() {
            ;(this.objFrom = {
                pageNo: 1,
                pageSize: 10,
            }),
                this.getList()
        },
        detailed(record, type) {
            this.$router.push({
                path: '/technical/ShiGroup/newPlan',
                query: {
                    type,
                    id: record.id,
                },
            })
        },
        onShowSizeChange(current, pageSize) {
            this.objFrom.pageNo = current
            this.objFrom.pageSize = pageSize
            this.getList()
        },
        onPageNo(page, pageSize) {
            this.objFrom.pageNo = page
            this.objFrom.pageSize = pageSize
            this.getList()
        },
        add() {
            this.$router.push({
                path: '/technical/ShiGroup/ApprovalSituation',
                query: {},
            })
        },
        add1() {
            this.$router.push({
                path: '/technical/ShiGroup/newPlan',
                query: {
                    type: 'add',
                },
            })
        },
        // 删除草稿
        discard(e) {
            let that = this
            that.$confirm({
                title: '温馨提示',
                content: '确定是否删除数据？',
                okText: '确认',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    return deleteList({ id: e.id })
                        .then((res) => {
                            that.$message.success('删除成功！')
                            that.$refs.table.refresh()
                        })
                        .catch((res) => {
                            that.$message.warning('删除失败！')
                        })
                },
            })
        },

        // discard(record) {
        //   deleteList({ id: record.id }).then((res) => {
        //     this.$message.success('删除成功')
        //     this.getList()
        //   })
        // },
        addEdit(record) {
            this.$router.push({
                path: '/technical/ShiGroup/newPlan',
                query: {
                    id: record.id,
                    type: 'edit',
                },
            })
        },
        /**
         * 统计
         */
        statisticsTemp() {
          return (
            <span>
              <span>待提交审核：<a>{ this.from.draft }</a>，</span>
              <span>审核中：<a>{ this.from.submitted }</a>，</span>
              <span>审核通过：<a>{ this.from.past }</a>，</span>
              <span>审核不通过：<a>{ this.from.rejected }</a>，</span>
              <span>待提交审批(变更中):<a>{ this.from.changeDraft }</a>，</span>
              <span>审核中(变更中)：<a>{ this.from.changeSubmitted }</a>，</span>
              <span>审核通过(变更中)：<a>{ this.from.changePast }</a>，</span>
              <span>审核不通过(变更中)：<a>{ this.from.changeRejected }</a>，</span>
              <span>计划审批方案数量：<a>{ this.from.planNum }</a></span>
            </span>
          )
        }
    },
}
</script>

<style lang="less">
.not-submit {
    display: inline-block;
    padding: 0;
    li {
        list-style: none;
        color: red;
    }
}
.submitted {
    display: inline-block;
    padding: 0;
    li {
        list-style: none;
        color: green;
    }
}
</style>
